Write Create Proposal Function

We will be writing the Create Proposal function in this step!

To locate this function, proceed to head over to the src/CreateProposal.tsx file. This file is the "Create Proposal" page which allows a user to fill in the necessary details of their intended proposal such as the proposal title, description and vote threshold!

To begin, let’s configure the proposal form!

Proceed to scroll down and you should see the //Step D - Configure Proposal Form comment!

Begin to overwrite the form variable with the following code snippet as shown below.

//Step D - Configure Proposal Form
const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    address: currentWalletAddress,
    title: "",
    description: "",
    voteThreshold: 0,
  },
});

In this code snippet, we have initialized a new form variable with some default values required to create a proposal! This includes the following fields - address, title, description and voteThreshold.

tip

ℹ️ Note: You should notice that we have parsed in the currentWalletAddress variable as our default value and this is so because we have parsed our wallet account address as a prop from our HomeDAO.tsx page when a user clicks on "Create Proposal" on the landing page.

With our proposal form initialized, we will next write the Create Proposal function upon onSubmit.

Proceed to scroll down and you should see the //Step E - Write Create Proposal Logic comment!

Begin to overwrite the onSubmit function with the following code snippet as shown below.

//Step E - Write Create Proposal Logic
function onSubmit(values: z.infer<typeof formSchema>) {
  const proposalInput: IProposalInput = {
    creator: currentWalletAddress,
    title: values.title,
    description: values.description,
    voteThreshold: values.voteThreshold,
  };

  setCreateProposalInput(proposalInput);

  const createNewProposal = async () => {
    try {
      await DAOContract?.callSendMethod(
        "CreateProposal",
        currentWalletAddress,
        createProposalInput
      );

      navigate("/");
      alert("Successfully created proposal");
    } catch (error) {
      console.error(error, "====error");
    }
  };

  createNewProposal();
}

In this code snippet, we first create a new proposalInput variable which stores the form input fields such as the title, description and vote threshold of the proposal and update the state variable.

Next, we will invoke the "CreateProposal" function of our deployed smart contract parsing in our current wallet address and proposalInput as input parameters as defined in our smart contract!

Furthermore, upon a successful proposal creation, we will navigate the user to the landing page and prompt an alert that the proposal has been successfully created!

Up next, we will be writing the Vote and Fetch Proposal functions to wrap up the frontend components of our Voting dApp!